<template>
    <u-popup :show="show" mode="bottom" @close="closePopup" @open="openPopup" :closeable="true" :safeAreaInsetBottom="true">
        <view class="package-popup">
            <!-- 弹窗头部 -->
            <view class="popup-header">
                <image :src="serviceDetail.image" mode="aspectFill" style="width: 160rpx; height: 160rpx; border-radius: 20rpx;"></image>
                <view class="popup-title-box">
                    <view class="popup-title">{{ selectedSpecData.name }}</view>
                    <view class="popup-price" v-if="selectedSpecData">    
                        <text class="popup-price-txt">¥</text>
                        <text class="popup-price-num">{{ selectedSpecData.price }}</text>
                        <text class="popup-price-txt">{{ selectedSpecData.unit }}</text>
                    </view>
                </view>
            </view>
            
            <!-- 服务规格选择 -->
            <view class="popup-section" v-if="serviceDetail.skus && serviceDetail.skus.length > 0">
                <view class="section-title">服务规格</view>
                <view class="spec-options">
                    <view 
                        class="spec-option" 
                        :class="{ 'active': selectedSpec === item.id }"
                        v-for="item in serviceDetail.skus" 
                        :key="item.id"
                        @click="selectSpec(item.id)"
                    >
                        {{ item.name }}
                    </view>
                </view>
            </view>
            
            <!-- 购买数量选择 -->
            <view class="popup-section-num">
                <view class="section-title">购买数量</view>
                <u-number-box 
                    v-model="quantity" 
                    @change="valChange" 
                    :min="minQuantity"
                    :max="maxQuantity"
                    buttonSize="28" 
                    bgColor="#fff"
                ></u-number-box>
            </view>
            
            <!-- 确定按钮 -->
            <view class="popup-footer">
                <view class="confirm-btn" @click="confirmSelection">确定</view>
            </view>
        </view>
    </u-popup>
</template>

<script>
export default {
    name: 'ShopSpecifications',
    props: {
        // 弹窗显示状态
        show: {
            type: Boolean,
            default: false
        },
        serviceDetail: {
            type: Object,
            default: () => ({})
        },
        // 最小数量
        minQuantity: {
            type: Number,
            default: 1
        },
        // 最大数量
        maxQuantity: {
            type: Number,
            default: 99
        },
        // 默认数量
        defaultQuantity: {
            type: Number,
            default: 1
        },
        // 默认选中的规格ID
        defaultSpecId: {
            type: [Number, String],
            default: null
        }
    },
    data() {
        return {
            selectedSpec: null,
            quantity: 1,
            selectedSpecData: {}
        }
    },
    watch: {
        show(newVal) {
            if (newVal) {
                this.initData()
            }
        },
        serviceDetail: {
            immediate: true,
            handler(newServiceDetail) {
                if (newServiceDetail && newServiceDetail.skus && newServiceDetail.skus.length > 0 && !this.selectedSpec) {
                    this.selectedSpec = this.defaultSpecId || newServiceDetail.skus[0].id
                }
            }
        }
    },
    methods: {
        // 初始化数据
        initData() {
            this.quantity = this.defaultQuantity
            if (this.serviceDetail && this.serviceDetail.skus && this.serviceDetail.skus.length > 0) {
                this.selectedSpec = this.defaultSpecId || this.serviceDetail.skus[0].id
                this.selectedSpecData = this.serviceDetail.skus.find(item => item.id === this.selectedSpec)
            }
        },
        
        // 选择规格
        selectSpec(specId) {
            this.selectedSpec = specId
            this.selectedSpecData = this.serviceDetail.skus.find(item => item.id === this.selectedSpec)
            this.$emit('selectSpec', this.selectedSpec)
        },
        
        // 数量变化
        valChange(value) {
            this.quantity = value
        },
        
        // 确认选择
        confirmSelection() {
            if (!this.selectedSpec) {
                uni.showToast({
                    title: '请选择规格',
                    icon: 'none'
                })
                return
            }
            
            // 从 serviceDetail.skus 中查找选中的规格
            const selectedSpec = this.serviceDetail.skus ? this.serviceDetail.skus.find(item => item.id === this.selectedSpec) : null
            const result = {
                specId: this.selectedSpec,
                specName: selectedSpec ? selectedSpec.name : '',
                quantity: this.quantity,
                productInfo: this.selectedSpecData
            }
            
            this.$emit('confirm', result)
            this.closePopup()
        },
        
        // 打开弹窗
        openPopup() {
            this.$emit('open')
        },
        
        // 关闭弹窗
        closePopup() {
            this.$emit('close')
            this.$emit('update:show', false)
        }
    }
}
</script>
<style lang="scss" scoped>
.package-popup {
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 0 0;
    padding: 32rpx;
    max-height: 80vh;
    overflow-y: auto;
}

.popup-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 32rpx;
    padding-bottom: 24rpx;
}

.popup-title-box {
    flex: 1;
    margin-left: 24rpx;
}

.popup-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
    margin-bottom: 12rpx;
    line-height: 1.4;
}

.popup-price {
    display: flex;
    align-items: baseline;
}

.popup-price-txt {
    font-size: 24rpx;
    color: #FF4141;
    font-weight: 400;
}

.popup-price-num {
    font-size: 36rpx;
    color: #FF4141;
    font-weight: 600;
    margin: 0 4rpx;
}

.popup-section {
    margin-bottom: 32rpx;
}

.section-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333333;
    margin-bottom: 20rpx;
}

.spec-options {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
}

.spec-option {
    padding: 16rpx 24rpx;
    background: #F8F8F8;
    border-radius: 8rpx;
    font-size: 26rpx;
    color: #666666;
    border: 2rpx solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
    
    &.active {
        background: #FFF5E6;
        border-color: #DF9824;
        color: #DF9824;
    }
}

.popup-section-num {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;

    .section-title {
        font-size: 28rpx;
        color: #333333;
        font-weight: 600;
    }
}

.popup-footer {
    display: flex;
    justify-content: center;
    margin: 80rpx 0 6rpx 0;
}

.confirm-btn {
    width: 600rpx;
    height: 80rpx;
    background: linear-gradient( 90deg, #0785CF 0%, #25A4EF 100%);
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7,133,207,0.1);
    border-radius: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 36rpx;
    color: #FFFFFF;
}
</style>